<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>我理解中的KISS</title>
    <meta name="author" content="unclexiao">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="css/reveal.css">
    <link rel="stylesheet" href="css/theme/night.css" id="theme">
    <link rel="stylesheet" href="css/uncle.css">
    <link rel="stylesheet" href="lib/css/zenburn.css">

    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"/>
</head>
<body>
<div class="reveal">
    <div class="slides">
        <section>
            <h2>我理解中的KISS</h2>
            <h6>Keep It Simple and Stupid</h6>
            <p>
                <small>Created by <a href="https://github.com/uncleXiao">肖蜀黍</a> / <a
                        href="http://weibo.com/uncle00xiao">@unclexiao</a></small>
            </p>
        </section>

        <section>
            <ol>
                <li>剧情回顾：雏SPA，伪MVC、自动化</li>
                <li>本集看点：单页面应用、视图-模型-控制、构建工具</li>
                <li>下集预告：vueJS + webpack</li>
            </ol>
        </section>

        <section class="sec-3">
            <h3>那些年我们用过的软件</h3>
            <div>
                <div class="left">
                    <img src="img/1-1.jpg">
                </div>
                <div class="right">
                    <img src="img/1-2.jpg">
                </div>
            </div>
            <h4></h4>
        </section>

        <section>
            <h3> 设计理念：<span class="highlight-red">可控</span>、<span class="highlight-red">可读</span></h3>
        </section>

        <section>
            <h3> 思想比代码更加重要</h3>
            <h3> 语言比框架能走更远</h3>
        </section>

        <section>
            <section>
                <h3>SPA:单页面应用</h3>
                <h3>MVC:视图-模型-控制</h3>
                <div>
                    <img src="img/3-1.jpg">
                </div>
            </section>
            <section  class="sec-4-2">
                <img src="img/3-2.png">
                <img src="img/3-3.png">
                <img src="img/3-4.png">
            </section>
            <section>
                <img src="img/3-6.png">
            </section>
            <section class="sec-4-4">
                <div class="left">
                    <h4>优点</h4>
                    <ul>
                        <li>无刷新体验，路由分发直接在浏览器端完成；</li>
                        <li>前端组件化，不再以页面为单位，规范代码结构和组织方式；</li>
                        <li>API共享，保存数据与资源，显著减少服务端的工作量；</li>
                    </ul>
                </div>

                <div class="right">
                    <h4>缺点</h4>
                    <ul>
                        <li>首次加载，必要的初始化，管理组件依赖</li>
                        <li>较高门槛，需要学习各种组件、框架、工具；</li>
                        <li>不利于 SEO，单页页面，数据在前端渲染，无法被检索；</li>
                    </ul>
                </div>
            </section>
        </section>
        <section>
            <h3>来点 <span style="text-decoration: line-through">（fuck-things）</span>干货！</h3>
        </section>

        <section>
            <section >
                <h4>文件解析 --&gt; 路由解析</h4>
                 <pre><code class="hljs javascript" contenteditable>
            window.onhashchange = function () {
                  load();
            };

            //load:微信授权+(获取用户资料+加载页面)
            function loadPage() {
                  page = getHashParam('r'); //路由参数，与PHP保持一致
                  if (page) {
                     loadHtml(page);
                  } else if (localStorage.thisPage) {
                     location.href = localStorage.thisPage;//微信授权会删除hash，保存此变量自动跳转
                  }
           }
                 </code></pre>
            </section>


            <section >
                <h4>添加JS --&gt 注入模块</h4>
                 <pre><code class="hljs javascript" contenteditable>
                     function loadHtml(page) {
                        $.ajax({
                            type: 'get',
                            url: 'html/' + page + '.html',
                            success: function (html) {
                                destroyLastPage();//销毁上个页面
                                initHtml(html);//替换容器内容
                                loadJs(page);//关联上下文并初始化
                            }
                        });
                     }

                     function destroyLastPage() {
                        if (me.page && me.page.destroy) {
                            me.page.destroy();//重要的事情说三遍：要销毁，要销毁，要肖会！
                        }
                     }
                     //模块？稍安勿躁...
                 </code></pre>
            </section>
            <section>
                <!--有始有终-->
                <h4>谁污染，谁治理 </h4>
                <h4>谁挖坑，谁填埋 </h4>
                <h4 class="highlight-red">谁注册，谁注销</h4>
            </section>
            <section>
                <h4>字符串替换 --&gt; 模板引擎</h4>
                  <pre><code class="hljs html" contenteditable>
                      <h1>{{title}}</h1>
                      <ul>
                          {{each list as value i}}
                          <li>索引 {{i + 1}} ：{{value}}</li>
                          {{/each}}
                      </ul>
                  </code></pre>

                 <pre><code class="hljs javascript" contenteditable>
                     var data = {
                        title: '标签',
                        list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
                     };
                 </code></pre>

                <pre><code class="hljs javascript" contenteditable>
                    var html = template('test', data); //加载数据
                    element.innerHTML = html;//渲染视图
                    element.on(function(){ });//处理逻辑
                </code></pre>
            </section>

            <section>
                  <h4>Dom Ready --&gt; Event Delegate</h4>
                  <pre><code class="hljs javascript" contenteditable>
                      element.on('click','li',function(){
                        //处理逻辑
                      })

                      element.off('click');
                  </code></pre>
            </section>

        </section>
        <section>
            <h3>Don't BB , Show me the code</h3>
            <div>
                <img src="img/files.png" alt="">
            </div>
        </section>

        <section>
            <h2>小结</h2>
            <ul>
                <li>开发；page,html,css</li>
                <li>调试：dev</li>
                <li>测试，node</li>
                <li>部署，gulp</li>
            </ul>
        </section>


        <section>
            <section>
                <h3>管理模块：<a href="http://seajs.org/docs/" class="">SeaJS</a></h3>
                <ol>
                    <li>轻</li>
                    <li>易</li>
                    <li>懒</li>
                </ol>
            </section>

            <section>
                 <pre><code class="hljs javascript" contenteditable>
    seajs.config({
        base: './javascripts',//设置根目录
        alias: {
            'template': 'lib/template',//模板引擎，渲染数据
            'swiper': 'lib/swiper.min',//滑动组件
            'dialog': 'common/dialog',//通用弹窗组件
            'report': 'common/report'//实时上报，目前仅接入本地服务
        },
        debug: false//发布请前置为false
    });
                  </code></pre>

                <pre><code class="hljs javascript" contenteditable>
   function loadJs(page) {
        seajs.use('pages/' + pageConfig[page], function (context) {
            me.page = context;
            context.init();
        });
    }
                  </code></pre>

                <pre><code class="hljs javascript" contenteditable>
     var dialog = require('dialog');
     var config = {
          type: 'alert',
          content: 'JavaScript从入门到放弃',
          okText: '我愿意'
     };
     var mDialog = new dialog(config);
     mDialog.show();
                  </code></pre>

            </section>

        </section>

        <section class="sec-7">
            <section>
                <h3>自动压缩：<a href="http://www.gulpjs.com.cn/" class="">gulp</a></h3>
                <ol>
                    <li>极快</li>
                    <li>友好</li>
                    <li>丰富</li>
                </ol>

            </section>
            <section>
                    <pre><code class="hljs javascript" contenteditable>
    gulp.task('uglify', function () {
        return gulp.src(getModule())//提取参数
            .pipe(uglify({
                mangle: {except: ['define', 'require', 'module', 'exports']},//seajs兼容
                compress: false
                }))
            .pipe(rename(function (path) {
                path.basename += timeStamp;//时间戳
            }))
            .pipe(gulp.dest('javascripts/pages/build/'));
    });

    gulp.task('cleancss', function () {});
    gulp.task('htmlmin', function () {});

    gulp.task('default', ['uglify', 'htmlmin', 'cleancss']);
                  </code></pre>
            </section>

        </section>

        <section class="sec-8">
            <h3>本地/真机调试：<a href="https://nodejs.org/en/" class="">node</a></h3>
            <ol>
                <li>JS错误</li>
                <li>接口错误</li>
                <li>逻辑错误</li>
            </ol>
            <pre><code class="hljs javascript" contenteditable>
    window.rep = new report('http://192.168.201.6:3000');//上报本地地址

    window.onerror = function (msg, url, num) {
        rep.send(msg + '---' + url + '---' + num);//定位错误
    };
                  </code></pre>
        </section>

        <section class="sec-9">
            <h2>小结</h2>
            <ul>
                <li>测试，node</li>
                <li>模块化：seajs</li>
                <li>工程化：gulp</li>
            </ul>
        </section>

        <section  >
            <h2>下集预告：组件化</h2>
            <h3>VueJS + Webpack</h3>
        </section>

        <section>
            <section class="sec-3-1">
                <h4> - 请用一句话定义组件化</h4>
                <h4> - 衣来伸手，饭来张口</h4>
                <h4> - Excuse Me？</h4>
                <h4> - Yeoman</h4>
            </section>
            <section class="sec-3-2">
                <div>
                    <img src="img/yeoman.jpg">
                </div>
                <pre><code class="hljs">
                   yo doctor
                   yo beautiful-girl --help
                   yo angular:controller MyNewController
                </code></pre>
            </section>

            <section>
                <h4> 躯体（结构层 HTML）、容貌（表现层 CSS）、灵魂（逻辑层 JS）</h4>
                <h4>  近20年来，他和她相辅相成，她和它相爱相杀！</h4>
                <pre><code class="hljs">
                    <!-- 表现层 -->
                    <link href="css/bootstrap.min.css" rel="stylesheet" contenteditable="true">

                    <!-- 结构层 -->
                    <h1>你好，bootstrap！</h1>

                    <!-- 逻辑层-->
                    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
                    <script src="js/bootstrap.min.js"></script>
                </code></pre>
                <h4 class="fragment fade-up" style="text-decoration: line-through">SeaJS/RequireJS：让我来解决模块依赖的特点</h4>
                <h4 class="fragment fade-up"> 现在，拯救苍生的英雄，横空出世 -- <span class="fragment highlight-red">Webpack</span></h4>
            </section>

            <section>
                <div>
                    <img src="img/tree.png">
                </div>
                <pre><code class="hljs">
                    require dialog//给我一个对话框
                    require loading-bar//再来一个加载进度条
                    require report//最后加个数据上报，谢谢
                </code></pre>
                <h5><a href="https://github.com/unclexiao/gradient-bar">Demo</a></h5>


            </section>

        </section>

        <section class="sec-11" >
            <h2>彩蛋：现代化</h2>
            <h3>ES2015 + React + Redux + Webpack</h3>
            <div>
                <img src="img/es6.png">
            </div>
        </section>

        <section class="sec-11" >

            <div>
                <img src="img/fight.png">
            </div>
        </section>
    </div>
</div>

<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>

<script>
    Reveal.initialize({
        controls: true,
        progress: true,
        history: true,
        center: true,
        transition: 'slider',
        dependencies: [
            {
                src: 'lib/js/classList.js', condition: function () {
                return !document.body.classList;
            }
            },
            {
                src: 'plugin/highlight/highlight.js', async: true, callback: function () {
                hljs.initHighlightingOnLoad();
            }
            },
            {src: 'plugin/zoom-js/zoom.js', async: true}
        ]
    });

</script>

</body>
</html>
